<template>
    <section class="checkVerify">
        <div v-loading="townLoad">
            <div class="doubleVerify">
                <div class="doubleVerifyTitle">双验证</div>
                <div class="doubleVerifyContent" >
                    <div class="doubleVerifyChart">
                        <div>工作实绩验证分析</div>
                        <div id="workChart" style="height: 400px"></div>
                    </div>
                    <div class="doubleVerifyChart">
                        <div>能力研判验证分析</div>
                        <div id="abilityChart" style="height: 400px"></div>
                    </div>
                    <div class="doubleVerifyChart">
                        <div>日常表现验证分析</div>
                        <div id="dailyChart" style="height: 400px"></div>
                    </div>
                </div>
            </div>
        </div>
    </section>

</template>

<script>
    export default {
        name: "CheckVerify",
        props:{
            districtId:{
                type:String,
                default:''
            }
        },
        data(){
            return{
                townLoad:false,
            }
        },
        watch: {
          'districtId': {
            handler: function(){
                  this.showDoubleVerifyData(this.districtId);
            }
          }
        },
        methods:{
            /*双验证数据，按镇显示*/
            showDoubleVerifyData(districtId){
                this.townLoad = true;
                this.$http('POST',`identity/kPIStatistics/list`,{districtId:districtId},false).then(data=>{
                    this.townLoad = false;
                    let xData = [];
                    let workData = [];
                    let abilityData = [];
                    let dailyData = [];
                    let villagePerformance = [];
                    let monitoringIndex = [];
                    let dvm = [];
                    let abilityJudgement = [];
                    let routine = [];
                    let comprehensiveEvaluation = [];
                    let workLegend = ['村级实绩','监测指标'];
                    let abilityLegend = ['日常工作、村级实绩、监测指标','能力研判'];
                    let dailyLegend = ['日常工作','综合评议'];
                    data.forEach(item=>{
                        xData.push(item.districtName.replace(/支部/g, ''));
                        villagePerformance.push(item.villagePerformance);
                        monitoringIndex.push(item.monitoringIndex);
                        dvm.push(item.dvm);
                        abilityJudgement.push(item.abilityJudgement);
                        routine.push(item.routine);
                        comprehensiveEvaluation.push(item.comprehensiveEvaluation);
                    });
                    this.$nextTick(()=>{
                        workData.push(
                            {name:'村级实绩', type: 'line', stack: '排名1',  symbolSize: 8,smooth: true, data:villagePerformance},
                            {name:'监测指标', type: 'line', stack: '排名2',  symbolSize: 8, smooth: true, data:monitoringIndex}
                        );
                        abilityData.push(
                            {name:'日常工作、村级实绩、监测指标', type: 'line',  symbolSize: 8, stack: '排名1', smooth: true, data:dvm},
                            {name:'能力研判', type: 'line', stack: '排名2',  symbolSize: 8, smooth: true, data:abilityJudgement}
                        );
                        dailyData.push(
                            {name:'日常工作', type: 'line', stack: '排名1',  symbolSize: 8, smooth: true, data:routine},
                            {name:'综合评议', type: 'line', stack: '排名2',   symbolSize: 8, smooth: true, data:comprehensiveEvaluation}
                        );
                        this.drawChart('workChart',workLegend,xData,workData);
                        this.drawChart('abilityChart',abilityLegend,xData,abilityData);
                        this.drawChart('dailyChart',dailyLegend,xData,dailyData);
                    })
                });
            },
            drawChart(chartId,legendData,xData,yData){
                let chart = echarts.init(document.getElementById(chartId));
                let option = {
                    tooltip: {
                        trigger: 'axis'
                    },
                    legend: {
                        data: legendData
                    },
                    grid: {
                       left: '45',
                    　　right: '30',
                    　　top: '20',
                    　　bottom: '50',
                    　　height: 'auto',
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data: xData,
                        axisPointer: {
                            type: 'shadow'
                        },
                        axisLabel: {
                            interval:0,
                            rotate:35
                        }
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: yData
                };
                chart.setOption(option);
            }
        },
        mounted(){
          this.showDoubleVerifyData(this.districtId);
        },
        created() {

        }
    }
</script>

<style scoped>



</style>
<style rel="stylesheet/scss" lang="scss">
    .checkVerify {
        .doubleVerify{
            margin-top: 20px;
            padding: 10px;
            background: #ffffff;
            border: 1px solid #EBEEF5;
            box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
            min-height: 500px;
            .doubleVerifyTitle{
                font-size: 16px;
                font-weight: bold;
                color: green;
            }
            .doubleVerifyContent{
                margin-top: 20px;
                font-size: 14px;
                text-align: left;
                line-height: 35px;
            }
            .doubleVerifyChart{
                border: 1px solid rgba(186, 186, 186, 0.73);
                margin: 5px 10px;
                padding: 5px 10px;
                font-weight: bold;
                font-size: 16px;
            }
        }
    }
    .checkVerify {
        .el-collapse-item__header{
            padding: 0 20px;
            font-size: 16px;
            font-weight: bold;
            color:green;
        }
        .el-card__header{
            background: none;
            box-shadow:none;
            font-size: 14px;
            color: #919191;
        }
    }
</style>
